<template>
  <li class="flex gap-4 py-3">
    <div>
      <div class="">
        <img
          :src="value?.user?.avatar"
          class="w-[35px] h-[35px] rounded-full object-cover"
        />
      </div>
    </div>
    <div class="flex-1 w-0">
      <!-- 评论内容 -->
      <div>
        <!-- 首层评论 -->
        <div v-if="value.parent_id === 0">
          <div class="text-gray-500 mb-1">{{ value?.user?.username }}</div>
          <div
            class="text-gray-600 max-w-full overflow-hidden"
            v-html="value.content"
          ></div>
        </div>
        <!-- 非首层评论 -->
        <div v-else class="">
          <span class="text-gray-500 mb-1 flex-shrink-0 align-top"
            >{{ value?.user?.username }}：</span
          >
          <div
            class="text-gray-600 inline-block max-w-full overflow-hidden"
            v-html="value.content"
          ></div>
        </div>
      </div>
      <!-- 评论图片 -->
      <div>
        <img
          class="comment-image max-w-[120px] max-h-[120px] my-2 rounded overflow-hidden"
          :src="value.picture"
          alt=""
        />
      </div>
      <div
        class="flex items-center gap-x-4 text-gray-400 text-xs mt-1 select-none"
      >
        <div class="">{{ value.create_time | fmtRelativeTime }}</div>
        <div
          class="cursor-pointer hover:text-[#00c4b6] duration-300 flex items-center"
        >
          <div class="text-base mr-1">
            <svg-icon icon-class="dianzan"></svg-icon>
          </div>
          <div>{{ $t('comment.like') }}</div>
        </div>
        <div
          v-if="commentInputVisible === false"
          class="cursor-pointer hover:text-[#00c4b6] duration-300 flex items-center"
          @click="commentInputVisible = true"
        >
          <div class="text-base mr-1">
            <svg-icon icon-class="pinglun"></svg-icon>
          </div>
          <div>{{ $t('comment.reply') }}</div>
        </div>
        <div
          v-else
          class="cursor-pointer text-[#00c4b6] duration-300 flex items-center"
          @click="commentInputVisible = false"
        >
          <div class="text-base mr-1">
            <svg-icon icon-class="pinglun-full"></svg-icon>
          </div>
          <div>{{ $t('comment.cancelReply') }}</div>
        </div>
      </div>
      <div v-if="commentInputVisible" class="mt-2">
        <comment-input @onSubmit="handleSendComment"></comment-input>
      </div>
      <!-- 插入回复组件 -->
      <div v-if="value.children">
        <comment-list :list="value.children"></comment-list>
      </div>
    </div>
  </li>
</template>

<script>
import { getRelativeTime } from '@/utils'
export default {
  name: 'comment-item',
  filters: {
    fmtRelativeTime(time) {
      return getRelativeTime(time)
    },
  },
  props: {
    // type: {
    //   // 评论类型 1、回复文章 2回复评论
    //   type: Number,
    //   default: 1,
    // },
    value: {
      type: Object,
      default: () => ({}),
    },
  },

  data() {
    return {
      commentInputVisible: false,
    }
  },
  computed: {
    userInfo() {
      return this.$store.state.userInfo
    },
  },
  methods: {
    // 文章评论
    async handleSendComment({ file, content }) {
      if (!this.userInfo) {
        return this.$warning({
          title: '请先登录后再进行评论~',
        })
      }
      if (!file && !content) {
        return this.$warning({
          title: '评论内容不能为空~',
        })
      }
      const { code } = await this.$apis.client.inserArticleComment({
        file,
        content,
        parent_id: this.value.id,
        articleId: this.value?.article?.id,
        userId: this.userInfo.id,
      })
      if (code === 200) {
        this.$success({
          title: '评论成功~',
          onOk: () => {
            window.location.reload()
          },
        })
      }
    },
  },
}
</script>
